<!-- 

    1全局前置守卫:router.beforeEach --- 执行1
        在每次导航前触发，可以用来进行全局的权限检查或者改变导航的目的地。

    2全局解析守卫 router.beforeResolve
        类似于 beforeEach，但它会在导航被确认之前等待所有的异步组件和钩子都被解析完成之后再执行。

    3全局后置钩子
        router.afterEach 导航完成后触发，适用于清理工作或更新页面标题等操作。它不会影响导航过程本身

    4路由独享的守卫 router.beforeEnter --- 执行2
        定义在路由配置中的特定路由上，在进入该路由之前触发。

    5组件内的守卫
        beforeRouteEnter
        在渲染该组件对应的路由被确认前调用。
        beforeRouteUpdate
        在当前路由改变但该组件被复用时调用。
        beforeRouteLeave
        导航离开该组件对应的路由时调用。
    

    全局前置守卫 (beforeEach)：最先执行，可以用于全局的条件判断或重定向。
    路由独享守卫 (beforeEnter)：如果定义了，则在全局前置守卫之后执行。
    组件内的守卫 (beforeRouteEnter)：只有在即将进入新组件时才会触发，此时你无法访问 this，因为组件实例尚未创建。
    全局解析守卫 (beforeResolve)：在所有 beforeEnter 和 beforeRouteEnter 钩子之后执行，确保所有异步任务都已完成。
    导航被确认：一旦所有的前置钩子都被正确执行且没有阻止导航，则导航将被确认。
    全局后置钩子 (afterEach)：导航完成后执行，通常用于一些副作用操作如设置页面标题等。它们不能取消导航。


    可以在路由配置中使用冒号 : 来定义参数。例如
    const router = new VueRouter({
    routes: [
        动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
    ]
    })
-->